import React, { useRef, useState } from 'react';
import { useIntl } from 'umi';

import { ProTable } from '@ant-design/pro-table';
import style from './index.less';
import moment from 'moment';

import { Button } from 'antd';

const AccountiDetails: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const [showFlag, setShowFlag] = useState(false);
  const actionRef = useRef();
  const buttonRef = useRef();

  const columns = [
    {
      // title: '户名',
      title: () => <>{t('form.Accountname')}</>,
      dataIndex: 'accountName',
      key: 'accountName',
      align: 'center',
      hideInSearch: true,
      render: (text) => <a>{text}</a>,
    },
    {
      // title: '币种',
      title: () => <>{t('form.currency')}</>,
      dataIndex: 'currency',
      key: 'currency',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '金额',
      title: () => <>{t('form.AmountMoney')}</>,
      dataIndex: 'money',
      key: 'money',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '系统流水号',
      title: () => <>{t('form.Systemserialnumber')}</>,
      key: ' serialNumber',
      dataIndex: 'serialNumber',
      align: 'center',
    },
    {
      // title: '交易类型',
      title: () => <>{t('form.TransactionType')}</>,
      key: ' transaction',
      dataIndex: 'transaction',
      align: 'center',
      hideInSearch: true,
    },
    {
      // title: '记账时间',
      title: () => <>{t('form.Bookkeepingtime')}</>,
      key: 'billingTime',
      dataIndex: 'billingTime',
      align: 'center',
      valueType: 'dateRange',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      // title: '账号',
      title: () => <>{t('form.AccountNo')}</>,
      key: ' account',
      dataIndex: 'serialNumber',
      align: 'center',
    },
    {
      // title: '备注',
      title: () => <>{t('form.Remarks')}</>,
      key: ' remarks',
      dataIndex: 'remarks',
      align: 'center',
      hideInSearch: true,
    },
  ];

  return (
    <div className={style.AccountiDetailboss}>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        ref={buttonRef}
        cardBordered
        form={{ labelWrap: true }}
        search={{
          labelWidth: 90,
          // span: 12,
          //   optionRender: ({ searchText, resetText }, { form }, dom) => [
          //     <Button
          //       key="searchText"
          //       type="primary"
          //       onClick={() => {
          //         form?.submit();
          //       }}
          //     >
          //       {t('buttons.query')}
          //     </Button>,
          //     <Button
          //       key="resetText"
          //       onClick={() => {
          //         form?.resetFields();
          //       }}
          //     >
          //       {t('buttons.Reset')}
          //     </Button>,
          //   ],
          //   collapseRender: (collapsed, showCollapseButton) => {
          //     return collapsed ? (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         {/* 展开 */}
          //         {t('buttons.Open')}
          //       </Button>
          //     ) : (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         {/* 关闭 */}
          //         {t('buttons.Close')}
          //       </Button>
          //     );
          //   },
        }}
        // search={{
        //   labelWidth: 90,
        //   searchText: refData == "en" ? "Query" : "查询",
        //   resetText: refData == "en" ? "Reset" : "重置",
        //   // defaultCollapsed: false,
        //   // collapseRender: false,
        // }}
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);

          const data = [
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
            {
              accountName: '1',
              currency: 'John Brown',
              money: 32,
              serialNumber: 'New York No. 1 Lake Park',
              transaction: 'wdw',
              remarks: '1dqwd',
            },
          ];

          return {
            data: data,
          };
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 20,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
      />
    </div>
  );
};
export default AccountiDetails;
